<template>
	<!-- 修改个人资料页 -->
	<view class="profile-modify-container">
		<view class="user-avatar">
			<image src="@/static/FRAME.png" mode="scaleToFill" />
		</view>
		<view class="profile-form">
			<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
				<uv-form-item label="姓名" prop="userInfo.name" borderBottom>
					<uv-input v-model="model1.userInfo.name" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="个性签名" labelWidth="80" prop="userInfo.signature" borderBottom>
					<uv-input v-model="model1.userInfo.signature" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSexSelect">
					<uv-input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				<!-- 是否默认公开生成的童话 -->
				<uv-form-item label="是否默认公开童话" prop="userInfo.isPublic" labelWidth="250" borderBottom>
					<uv-switch v-model="model1.userInfo.isPublic" activeColor="#007aff"></uv-switch>
				</uv-form-item>
			</uv-form>
		</view>
		<view class="save-button">保存</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			model1: {
				userInfo: {
					name: '',
					sex: ''
				}
			},
			rules: {
				'userInfo.name': [{
					required: true,
					message: '请输入姓名',
					trigger: 'blur'
				}],
				'userInfo.sex': [{
					required: true,
					message: '请选择性别',
					trigger: 'change'
				}]
			}
		}
	},
	methods: {

	}
}
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.profile-modify-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.user-avatar {
		width: 100px;
		height: 100px;
		border-radius: 100%;
		overflow: hidden;
		margin-bottom: 20px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.profile-form {
		width: 80%;
		background-color: #ffffff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.save-button {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		width: 80%;
		height: 100rpx;
		background-image: linear-gradient(to right, #7B4DFF, #FF4D8C);
		border-radius: 16rpx;
		color: #ffffff;
		text-align: center;
		margin-top: 150rpx;
	}
}
</style>
